<!DOCTYPE html>
<html id="htmlFont" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="./assets/china.json"></script>
    <script type="text/javaScript" src="./js/echarts.min.js"></script>
    <script type="text/javaScript" src="./js/shine.js"></script>
    <!-- 高德 -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=f351fad35a447f5cba791c5412a330b1&plugin=AMap.Geolocation"></script>
    <!-- echarts 图表结构 -->
    <script src="./js/utils.js"></script>
    <link href="./index.css" rel="stylesheet">
    <title>智能决策数字化驾驶舱</title>
</head>
<body>
    <div id="app">
        <div class="header flex-between">
            <!-- 铜陵市铜官区2024春季课后服务 -->
            <div class="header-mess flex-center">
                <span style="font-size: 2.5rem; ">
                    {{ control.currentTime }}
                </span>
                <div class="header-mess-strip"></div>
                <span>
                    <div>{{ control.dayOfWeek }}</div>
                    <div style="font-size: .7rem;">{{ control.today }}</div>
                </span>
            </div>
            <div class="header-mess flex-center" v-if="control.casts.length">
                <span style="font-size: 1.8rem; ">
                    {{ control.casts[0]?.daywind }}风
                </span>
                <div class="header-mess-strip"></div>
                <div class="flex-between" style="width: 65%; font-size: .7rem; font-weight: 400;">
                    <div v-for="(item, index) in control.casts.slice(0,2)" :key="index" class="flex-between">
                        <img style="width: 2rem; max-height: 100%; margin-right: .3rem" :src="weather[item.dayweather]" alt="">
                        <div>
                            <div>
                                <span>{{ index ? '明天' : '今天' }}</span>
                                {{ item.dayweather }}
                            </div>
                            <div style="font-size: .6rem;">{{ item.nighttemp }}°C~{{ item.daytemp }}°C</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="content">
            <!-- 左边 -->
            <div class="content-left column-between">
                <div class="content-charst-box">
                    <div class="content-charst-box-head">人才结构</div>
                    <div class="content-charst-box-content" id="nightingale"></div>
                </div>
                <div class="content-charst-box">
                    <div class="content-charst-box-head">求职成功率</div>
                    <div class="content-charst-box-content" id="jobWantedProb"></div>
                </div>
                <div class="content-charst-box">
                    <div class="content-charst-box-head">专业热度</div>
                    <div class="content-charst-box-content">
                        <el-row>
                            <el-col :span="5">专业名称</el-col>
                            <el-col :span="5">高精尖</el-col>
                            <el-col :span="5">普通</el-col>
                            <el-col :span="9">占比</el-col>
                        </el-row>
                        <div class="content-charst-box-content-scoll">
                            <el-row v-for="(item, key) in courseSortList" :key="key">
                                <el-col :span="5">{{ item.coursName }}</el-col>
                                <el-col :span="5">{{ item.feedbackScore }}</el-col>
                                <el-col :span="5">{{ item.feedbackScore }}</el-col>
                                <el-col :span="9">
                                    <!-- <span style="color: #00F6AE;">{{ item.applauseRate }}%</span> -->
                                    <el-progress :percentage="item.applauseRate"><span style="color: #ffffff">{{ item.applauseRate }}%</span></el-progress>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 中间 -->
            <div class="content-center">
                <div class="content-center-top flex-between">
                    <div class="center-charst-box" style="width: 49.5%;">
                        <div class="content-charst-box-head">人才流动排名</div>
                        <div class="content-charst-box-content" id="mobileTalents"></div>
                    </div>
                    <div class="center-charst-box" style="width: 49.5%;">
                        <div class="content-charst-box-head">人才地区排名</div>
                        <div class="content-charst-box-content" id="regionalRank"></div>
                        <!--  -->
                    </div>
                </div>
                <div class="content-charst-box content-charst-boxMap">
                    <div class="content-charst-boxMap-header">人才总数：<span v-html="getBoxNum(mapChineseList.personneTotal)"></span>人</div>
                    <div class="content-charst-boxMap-content">
                        <div class="content-charst-boxMap-content-left column-around">
                            <div class="talentsNum column-around">
                                <div>昨天人才数</div>
                                <div class="talentsNum-total">{{ mapChineseList.yesterdayNum }}</div>
                            </div>
                            <div class="talentsNum column-around">
                                <div>环比增长</div>
                                <div class="talentsNum-total">{{ mapChineseList.chainRatio }}</div>
                            </div>
                        </div>
                        <div class="content-charst-boxMap-content-right">
                            <div id="mapChinese"></div>
                            <div class="content-charst-boxMap-content-right-sign column-around">
                                <div class="citySort ellipsis">
                                    <span>{{ mapChineseList.mapRankRegion.substring(0, 2) }}地区：</span>
                                    <span class="citySort-num">TOP{{ mapChineseList.mapRanking }}</span>
                                </div>
                                <div class="citySort">
                                    <span>人才人数：</span>
                                    <span class="citySort-num">{{ mapChineseList.mapRankPersonnel }}</span>
                                </div>
                                <!-- <div>
                                    <span>环比增长</div>
                                    <span class="talentsNum-total">{{ mapChineseList.chainRatio }}</div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-center-bottom flex-between">
                    <div class="center-charst-box" style="width: 49.5%;">
                        <div class="content-charst-box-head">求职趋势</div>
                        <div class="content-charst-box-content" id="jobWantedTrend"></div>
                    </div>
                    <div class="center-charst-box" style="width: 49.5%;">
                        <div class="content-charst-box-head">招聘趋势</div>
                        <div class="content-charst-box-content" id="recruitTrend"></div>
                    </div>
                </div>
            </div>

            <!-- 右边 -->
            <div class="content-right column-between">
                <div class="content-charst-box">
                    <div class="content-charst-box-head">行业热度</div>
                    <div class="hottestIndust flex-between">
                        <div class="flex-center">涉及行业总数 <span>{{ control?.numOfIndust }}</span></div>
                        <div class="flex-center">热度行业 <span>{{ control?.hottestIndustry }}</span></div>
                    </div>
                    <div class="content-charst-box-content" style="height: calc(100% - 3rem) !important;" id="participants"></div>
                </div>
                <div class="content-charst-box">
                    <div class="content-charst-box-head">紧缺岗位</div>
                    <div class="content-charst-box-content" id="weeklyVisitor"></div>
                </div>
                <div class="content-charst-box">
                    <div class="content-charst-box-head">囯岗位热度排名</div>
                    <div class="content-charst-box-content">
                        <el-row>
                            <el-col :span="6">岗位名称</el-col>
                            <el-col :span="6">人数</el-col>
                            <el-col :span="4">占比</el-col>
                            <el-col :span="8">热度</el-col>
                        </el-row>
                        <div class="content-charst-box-content-scoll">
                            <el-row v-for="(item, key) in teacherSortList" :key="key">
                                <el-col :span="6">{{ item.teacherName }}</el-col>
                                <el-col :span="6">{{ item.teacherName }}</el-col>
                                <el-col :span="4">{{ item.feedbackScore }}</el-col>
                                <el-col :span="8">
                                    <div class="hotModel">
                                        <img v-for="(e, l) in 5" :key="l" :src="l < item.feedbackScore ? './image/hotY.png' : './image/hotN.png'" alt="" />
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javaScript" src="./js/index.js"></script>
</body>
</html>